<template>
	<view class="wrap">
		<view class="wrap__mian">
			<view class="main__title">{{newsDetail.title}}</view>
			<view class="main__time">{{newsDetail.createtime | formatTime}}</view>
			<view class="main__Image" v-show="newsDetail.image !== ''">
				<image :src="newsDetail.image" style="width: 95%;"></image>
			</view>
			<view class="main__content">
				<rich-text :nodes="newsDetail.content" class="rich"></rich-text>
			</view>
		</view>
	</view>
</template>

<script>
	import {formatDate} from '@/common/js/utils.js'
	export default{
		data(){
			return {
				newsDetail:{}
			}
		},
		filters:{
			formatTime(time){
				return time ? formatDate(time*1000) : "-"
			}
		},
		onLoad(options) {
			let {id} = options
			// 获取新闻详情
			this.getNewsDetails(id)
		},
		methods:{
			async getNewsDetails(id){
				let res = await this.$api.getNewsDetails(id)
				if(res.code === 1 && res.data){
					console.log("res.data", res.data.content)
					this.newsDetail = res.data
				}
			}
		}
	}
</script>

<style lang="scss">
	.wrap{
		padding: 30rpx 0; 
		box-sizing: border-box;
		.wrap__mian{
			/* color: #fff; */
			.main__title{
				font-size: 32rpx;
				padding-left: 20rpx;
				box-sizing: border-box;
				color: #fff;
			}
			.main__time{
				margin-top: 20rpx;
				color: #ddd;
				font-size: 28rpx;
				padding-left: 20rpx;
				box-sizing: border-box;
			}
			.main__Image{
				width: 100%;
				height: 100%;
				padding: 15rpx 0;
				display: flex;
				justify-content: center;
				align-items: center;
			}
			.main__content{
				margin-top: 30rpx;
				@include flexCenter(column);
				.content__img{
					width: 550rpx;
					height: 450rpx;
				}
				.rich{
					margin-top: 30rpx;
					padding: 0 24rpx;
					box-sizing: border-box;
					width: 750rpx;
					color: #fff;
				}
			}
		}
	}
	img{
		width: 702rpx;
		object-fit: contain;
	}
	p{
		box-sizing: border-box;
		text-align: justify;
	}
</style>